<template>
	<div class="pc-form" v-if="this.deviceType == 'pc'">
	<el-card :body-style="{ padding: '0px' }" >
		<el-header  height="50px" >
			<el-menu
			  :default-active="activeIndex"
			  router
			  class="el-menu-demo"
			  mode="horizontal"
			  @select="handleSelect"
			  background-color="#545c64"
			  text-color="#fff"
			  active-text-color="#ffd04b"
			  >
			  <el-menu-item index="1" class="el-icon-s-home"  @click="$router.push('/')">首页</el-menu-item>
			  <el-menu-item index="2" @click="$router.push('/Add')">添加表单</el-menu-item>
			  <el-menu-item index="3" @click="$router.push('FormList')">查看表单</el-menu-item>
			  <el-menu-item index="4" @click="$router.push('/CollectList')">收藏表单</el-menu-item>
			</el-menu> 
		</el-header>
		<div class="content" id="vue" v-cloak>
			<div style="background: #cdcfd0;min-height: calc(100vh - 10px); padding: 10px;">
				<div class="flex-row">
					<!-- 问卷左侧 -->
					<div class="well-box" style="width: 170px;margin-right: 15px">
						<div style="input-group-fan text-left">
							<el-button size="small" class="el-icon-view" @click="dialogFormVisible = true">预览</el-button>
							<el-dialog title="预览" :visible.sync="dialogFormVisible">
							    <div>
							    	<span style="width: 500px;" name="title" type="text" class="form-control" >{{Form.headline}}</span>
							    </div>
							    <div v-show="list.length != 0">
							    	<div class="well-box mt-1 text-left" :class="'questionnaire_'+index" v-for="(item, index) in list" :key="index">
							    		
							    		<div class="flex-row">
							    			<div style="width: 50px;padding:5px 10px;font-size: 14px">
							    				{{ index + 1 }}
							    			</div>
							    			<div class="flex-1">
							    				<span>{{item.questionContent}}</span>
							    				<div>
							    					<!-- 判断为单选题型 -->
							    					<div v-if="'singleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
							    						<input type="radio" :name='"optionschoice["+index+"]"':value="item.options[i].optionContent" @click="getRadioVal(item.options[i].optionContent,item.type,item.sort)" />
							    						<span>{{item.options[i].optionContent}}</span>
							    					</div>
							    					<!-- 判断为单选题型 end -->
							    
							    					<!-- 判断为多选题型 -->
							    					<div v-if="'mutipleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
							    						<input type="checkbox" name="options" :value="item.options[i].optionContent" @click="getRadioVal(item.options[i].optionContent,item.type,item.sort)" />
							    						<span>{{item.options[i].optionContent}}</span>
							    					</div>
							    					<!-- 判断为多选题型 end -->
							    
							    					<!-- 判断为简答题型 -->
							    					<div v-if="'scoring' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
							    						<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="item.options[i].optionContent"/>
							    					</div>
							    			    </div>
							    		    </div>
							    		</div>
							    	</div>
							    </div>
								<el-divider></el-divider>
							  <div slot="footer" class="dialog-footer">
							    <el-button @click="dialogFormVisible = false">取 消</el-button>
							    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
							  </div>
							</el-dialog>
							<el-button size="small"  class="el-icon-success" @click='savelist(Form)'>保存</el-button>
							<div class="mt-3 pointer" @click='addQuestionnaire("singleChoice")'>
								单选题
							</div>
							<el-divider></el-divider>
							<div class="mt-3 pointer" @click='addQuestionnaire("mutipleChoice")'>
								多选题
							</div><el-divider></el-divider>
							<div class="mt-3 pointer" @click='addQuestionnaire("scoring")'>
								简答题
							</div>
							<el-divider></el-divider>
						</div>
					</div>
					<!-- 问卷左侧 end -->

					<!-- 问卷右侧 -->
					<div class=" flex-1">
						<form action="#" method="post">
							<div class="well-box">
								<div class="input-group-fan text-left">
									<input name="title" type="text" placeholder="表单标题" v-model="Form.headline" class="form-control"  />
								</div>
								<div class="input-group-fan text-left">
									    <el-date-picker
									      v-model="value2"
									      type="datetimerange"
									      :picker-options="pickerOptions"
									      range-separator="至"
									      start-placeholder="开始日期"
									      end-placeholder="结束日期"
									      align="right">
									    </el-date-picker>
								</div>
							</div>
							<!-- 问题集合为空时提示添加题型 end -->
							<div v-show="list.length == 0">
								<div class="questionnaire_null flex-row flex-center flex-middle">
									请从左边选择题型
								</div>
							</div>
							<!-- 问题集合为空时提示添加题型 end -->
							<div v-show="list.length != 0">
								<div class="well-box mt-1 text-left" :class="'questionnaire_'+index" v-for="(item, index) in list" :key="index">
									<!-- 操作按钮 增加 复制 删除 -->
									<div class="text-right">
										<el-button class="iconfont f28 pointer icon-jia" icon="el-icon-plus" circle size="mini" @click="addQuestionnaire(item.type,index)"></el-button>
										<el-button class="iconfont f28 pointer icon-fuzhi" icon="el-icon-document-copy" circle size="small" @click="addQuestionnaire(item.type,index,'copy')"></el-button>
										<el-button class="iconfont f28 pointer icon-shanchu" circle size="mini" icon="el-icon-delete" @click="delQuestionnaire(index)"></el-button>
									</div>
									<!-- 操作按钮 增加 复制 删除 end -->
									<div class="flex-row">
										<div style="width: 50px;padding:5px 10px;font-size: 14px">
											{{ index + 1 }}
										</div>
										<div class="flex-1">
											<input class="input-border notopmargin" type="text" v-model="item.questionContent" placeholder="请输入标题" />
											<div>
												<!-- 判断为单选题型 -->
												<div v-if="'singleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
													<input type="radio" :name='"optionschoice["+index+"]"' />
													<input class="input-border" type="text" v-model="item.options[i].optionContent" />

													<el-button class="iconfont f28 pointer icon-jia" icon="el-icon-plus" circle size="mini" @click='addAanwer("radio",index,i)'></el-button>
													<el-button class="iconfont f28 pointer icon-shanchu" circle size="mini" icon="el-icon-delete" @click='delAanwer("radio",index,i)'></el-button>
												</div>
												<!-- 判断为单选题型 end -->

												<!-- 判断为多选题型 -->
												<div v-if="'mutipleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
													<input type="checkbox" name="options" />
													<input class="input-border" type="text" v-model="item.options[i].optionContent" />

													<el-button class="iconfont f28 pointer icon-jia" icon="el-icon-plus" circle size="mini" @click='addAanwer("checkbox",index,i)'></el-button>
													<el-button class="iconfont f28 pointer icon-shanchu" circle size="mini" icon="el-icon-delete" @click='delAanwer("checkbox",index,i)'></el-button>
												</div>
												<!-- 判断为多选题型 end -->

												<!-- 判断为简答题型 -->
												<div v-if="'scoring' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
													<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="item.options[i].optionContent">
													</el-input>
												</div>

												<!-- 判断为简答型 end -->
											</div>
										</div>
									</div>
								</div>
							</div>
						</form>
					</div>
					<!-- 问卷右侧 end -->
				</div>
			</div>
		</div>
	</el-card>
	</div>
	<div class="mobile-form" v-else-if="this.deviceType == 'mobile'">
		<el-header  height="50px" >
			<el-menu
			  :default-active="activeIndex"
			  router
			  class="el-menu-demo"
			  mode="horizontal"
			  @select="handleSelect"
			  background-color="#545c64"
			  text-color="#fff"
			  active-text-color="#ffd04b"
			  >
			  <el-menu-item index="1" class="el-icon-s-home"  @click="$router.push('/')">首页</el-menu-item>
			  <el-menu-item index="2" @click="$router.push('/Add')">添加表单</el-menu-item>
			  <el-menu-item index="3" @click="$router.push('FormList')">查看表单</el-menu-item>
			  <el-menu-item index="4" @click="$router.push('/CollectList')">收藏表单</el-menu-item>
			</el-menu> 
		</el-header>
		<!-- 问卷上侧 -->
		<div class=" flex-1">
			<form action="#" method="post">
				<div class="well-box">
					<div class="input-group-fan text-left">
						<input name="title" type="text" placeholder="表单标题" v-model="Form.headline" class="form-control"  />
					</div>
					<div class="input-group-fan text-left">
						    <el-date-picker
						      v-model="value2"
						      type="datetimerange"
						      :picker-options="pickerOptions"
						      range-separator="至"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期"
						      align="right">
						    </el-date-picker>
					</div>
				</div>
				<!-- 问题集合为空时提示添加题型 end -->
				<div v-show="list.length == 0">
					<div class="questionnaire_null flex-row flex-center flex-middle">
						请从左边选择题型
					</div>
				</div>
				<!-- 问题集合为空时提示添加题型 end -->
				<div v-show="list.length != 0">
					<div class="well-box mt-1 text-left" :class="'questionnaire_'+index" v-for="(item, index) in list" :key="index">
						<!-- 操作按钮 增加 复制 删除 -->
						<div class="text-right">
							<el-button class="iconfont f28 pointer icon-jia" icon="el-icon-plus" circle size="mini" @click="addQuestionnaire(item.type,index)"></el-button>
							<el-button class="iconfont f28 pointer icon-fuzhi" icon="el-icon-document-copy" circle size="small" @click="addQuestionnaire(item.type,index,'copy')"></el-button>
							<el-button class="iconfont f28 pointer icon-shanchu" circle size="mini" icon="el-icon-delete" @click="delQuestionnaire(index)"></el-button>
						</div>
						<!-- 操作按钮 增加 复制 删除 end -->
						<div class="flex-row">
							<div style="width: 50px;padding:5px 10px;font-size: 14px">
								{{ index + 1 }}
							</div>
							<div class="flex-1">
								<input class="input-border notopmargin" type="text" v-model="item.questionContent" placeholder="请输入标题" />
								<div>
									<!-- 判断为单选题型 -->
									<div v-if="'singleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
										<input type="radio" :name='"optionschoice["+index+"]"' />
										<input class="input-border" type="text" v-model="item.options[i].optionContent" />
		
										<el-button class="iconfont f28 pointer icon-jia" icon="el-icon-plus" circle size="mini" @click='addAanwer("radio",index,i)'></el-button>
										<el-button class="iconfont f28 pointer icon-shanchu" circle size="mini" icon="el-icon-delete" @click='delAanwer("radio",index,i)'></el-button>
									</div>
									<!-- 判断为单选题型 end -->
		
									<!-- 判断为多选题型 -->
									<div v-if="'mutipleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
										<input type="checkbox" name="options" />
										<input class="input-border" type="text" v-model="item.options[i].optionContent" />
		
										<el-button class="iconfont f28 pointer icon-jia" icon="el-icon-plus" circle size="mini" @click='addAanwer("checkbox",index,i)'></el-button>
										<el-button class="iconfont f28 pointer icon-shanchu" circle size="mini" icon="el-icon-delete" @click='delAanwer("checkbox",index,i)'></el-button>
									</div>
									<!-- 判断为多选题型 end -->
		
									<!-- 判断为简答题型 -->
									<div v-if="'scoring' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
										<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="item.options[i].optionContent">
										</el-input>
									</div>
		
									<!-- 判断为简答型 end -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
		
		<el-button @click="drawer = true"  style="margin-left: 16px;">
		  + 添加题目
		</el-button>
		<el-button size="small" class="el-icon-view" @click="dialogFormVisible = true">预览</el-button>
		<el-dialog title="预览" :visible.sync="dialogFormVisible">
		    <div>
		    	<span style="width: 500px;" name="title" type="text" class="form-control" >{{Form.headline}}</span>
		    </div>
		    <div v-show="list.length != 0">
		    	<div class="well-box mt-1 text-left" :class="'questionnaire_'+index" v-for="(item, index) in list" :key="index">
		    		
		    		<div class="flex-row">
		    			<div style="width: 50px;padding:5px 10px;font-size: 14px">
		    				{{ index + 1 }}
		    			</div>
		    			<div class="flex-1">
		    				<span>{{item.questionContent}}</span>
		    				<div>
		    					<!-- 判断为单选题型 -->
		    					<div v-if="'singleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
		    						<input type="radio" :name='"optionschoice["+index+"]"':value="item.options[i].optionContent" @click="getRadioVal(item.options[i].optionContent,item.type,item.sort)" />
		    						<span>{{item.options[i].optionContent}}</span>
		    					</div>
		    					<!-- 判断为单选题型 end -->
		    
		    					<!-- 判断为多选题型 -->
		    					<div v-if="'mutipleChoice' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
		    						<input type="checkbox" name="options" :value="item.options[i].optionContent" @click="getRadioVal(item.options[i].optionContent,item.type,item.sort)" />
		    						<span>{{item.options[i].optionContent}}</span>
		    					</div>
		    					<!-- 判断为多选题型 end -->
		    
		    					<!-- 判断为简答题型 -->
		    					<div v-if="'scoring' == item.type" v-for="(optionsItem,i) in item.options" :key="i">
		    						<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="item.options[i].optionContent"/>
		    					</div>
		    			    </div>
		    		    </div>
		    		</div>
		    	</div>
		    </div>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="dialogFormVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
		  </div>
		</el-dialog>
	    <el-button size="small"  class="el-icon-success" type="primary" @click='savelist(Form)'>保存</el-button>
		<el-drawer
		  title="自定义题目"
		  :visible.sync="drawer"
		  :direction="direction"
		  >
		  <!-- 问卷抽屉 -->

		  	<div style="input-group-fan text-left">
		  		<div class="mt-3 pointer" @click='addQuestionnaire("singleChoice")'>
		  			单选题
		  		</div>
		  		<el-divider></el-divider>
		  		<div class="mt-3 pointer" @click='addQuestionnaire("mutipleChoice")'>
		  			多选题
		  		</div><el-divider></el-divider>
		  		<div class="mt-3 pointer" @click='addQuestionnaire("scoring")'>
		  			简答题
		  		</div>
		  		<el-divider></el-divider>
		  	</div>

		  <!-- 问卷抽屉 end -->
		</el-drawer>
		</div>
		
</template>


<script>
	export default {
		name: 'Add',
		  mounted() {
		        if (this._isMobile()) {
		            //alert("手机端");
		            this.deviceType = 'mobile'
		        } else {
		            //alert("pc端");
		            this.deviceType = 'pc'
		        }
		    },

		data() {
			return {
				deviceType:'',
				drawer: false,
				direction: 'btt',
				dialogFormVisible: false,
				formLabelWidth: '200px',
				activeIndex: '2',
				activeName: 'second',
				value2:'',
				pickerOptions: {
				          shortcuts: [{
				            text: '最近一周',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date();
				              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
				              picker.$emit('pick', [start, end]);
				            }
				          }, {
				            text: '最近一个月',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date();
				              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
				              picker.$emit('pick', [start, end]);
				            }
				          }, {
				            text: '最近三个月',
				            onClick(picker) {
				              const end = new Date();
				              const start = new Date();
				              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
				              picker.$emit('pick', [start, end]);
				            }
				          }]
				        },
				textarea: '',
				list: [],
				Form: {
					headline: '',
					startDate:'',
					endDate:'',
					sList: [],
				}
			}
		},

		methods: {
			_isMobile() {
			            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
			            return flag;
			},
			

			to(path) {
				this.$router.push(path)
			},
			//新增一题
			addQuestionnaire(type, index, operation) {
				// 添加单选题
				if (type == 'singleChoice') {
					var singleChoice = {
						questionContent: '',
						options: [{
							optionContent: "选项1"
						}, {
							optionContent: "选项2"
						}],
						type: 'singleChoice',
						sort: this.list.length + 1
					}
					// 在当前题下方添加
					if (index != undefined && undefined == operation) {
						this.list.splice(index + 1, 0, singleChoice)
					}
					// 复制题型
					else if (index != undefined && 'copy' == operation) {
						var copyChoice = {
							questionContent: this.list[index].questionContent,
							options: this.list[index].options.slice(0),
							type: type,
							sort: this.list.length + 1
						}
						this.list.splice(index + 1, 0, copyChoice)
					} else {
						this.list.push(singleChoice)
					}
				}
				//添加单选题 end
				// 添加多选题
				else if (type == 'mutipleChoice') {
					var mutipleChoice = {
						questionContent: '',
						options: [{
							optionContent: "选项1"
						}, {
							optionContent: "选项2"
						}],
						type: 'mutipleChoice',
						sort: this.list.length + 1
					}
					// 在当前题下方添加
					if (index != undefined && undefined == operation) {
						this.list.splice(index + 1, 0, mutipleChoice)
					}
					// 复制题型
					else if (index != undefined && 'copy' == operation) {
						var copyChoice = {
							questionContent: this.list[index].questionContent,
							options: this.list[index].options.slice(0),
							type: type,
							sort: this.list.length + 1
						}
						this.list.splice(index + 1, 0, copyChoice)
					} else {
						this.list.push(mutipleChoice)
					}
				}
				// 添加多选题 end

				// 添加简答题
				else if (type == 'scoring') {
					var scoring = {
						questionContent: '',
						options: [{
							optionContent: ""
						}],
						type: 'scoring',
						sort: this.list.length + 1
					}

					// 在当前题下方添加
					if (index != undefined && undefined == operation) {
						this.list.splice(index + 1, 0, scoring)
					}
					// 复制题型
					else if (index != undefined && 'copy' == operation) {
						var copyChoice = {
							questionContent: this.list[index].questionContent,
							options: '',
							type: type,
							sort: this.list.length + 1
						}
						this.list.splice(index + 1, 0, copyChoice)
					} else {
						this.list.push(scoring)
					}
				}

				// 添加简答题 end

			},
			//删除一题
			delQuestionnaire(id) {
				this.list.splice(id, 1)
			},

			//添加一项答案
			addAanwer(type, index, option) {
				var options = this.list[index].options.length + 1
				this.list[index].options.push({
					optionContent: "选项"+options
				})
			},

			//删除一项答案
			delAanwer(type, index, option) {
				if (this.list[index].options.length > 2) {
					this.list[index].options.splice(option, 1)
				} else {
					this.$message.error('至少留下两项哦！')
				}
			},

			async savelist(Form) {
				console.log(this.value2)
				var d1 = new Date(this.value2[0]);
				var sd=d1.getFullYear() + '-' + (d1.getMonth() + 1) + '-' + d1.getDate() + ' ' + d1.getHours() + ':' + d1.getMinutes() + ':' + d1.getSeconds();
				var d2 = new Date(this.value2[1]);
				var ed=d2.getFullYear() + '-' + (d2.getMonth() + 1) + '-' + d2.getDate() + ' ' + d2.getHours() + ':' + d2.getMinutes() + ':' + d2.getSeconds();
				this.Form.startDate=d1
				this.Form.endDate=d2
				this.Form.sList = this.list
				console.log(Form)
				const {
					data: res
				} = await this.$http.post('addForm', Form)
				this.$message.success('添加表单成功!')
				this.$router.push('/')
			},
			handleSelect(key, keyPath) {
			        console.log(key, keyPath);
			      },

		}
	}
	//添加单选题 end
</script>

<style>
	.el-header {
	    background-color: #a9a9be;
	    color: #333;
	    line-height: 50px;
		padding:0;
	  }
	.pathItem {
		float: left; 
		font-size: 1.3rem;
		list-style:none;
		margin:5px 5px;
		cursor: pointer;
	}
	h1, h2 {
		 /* color: #00557f; */
		 font-size: 1.3rem;
	  font-weight: normal; 
	}
	[v-cloak] {
		display: none;
	}

	body {
		margin: 0;
	}

	.flex-row {
		display: flex;
	}

	.flex-column {
		flex-direction: column;
	}

	.flex-1 {
		flex: 1;
	}

	.flex-middle {
		align-items: center;
	}

	.flex-align-items-center {
		align-items: center;
	}

	.flex-justify {
		justify-content: space-between;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.flex-center {
		justify-content: center;
	}

	.mt-3 {
		margin-top: 30px !important;
	}

	.mt-1 {
		margin-top: 10px !important;
	}

	.well-box {
		background: #fff;
		padding: 15px;
		min-height: 150px;
	}

	.content .content-box {
		padding: 15px;
		background-color: #fff;
		margin-bottom: 15px;
	}

	.block {
		display: block !important;
	}

	.relative {
		position: relative;
	}

	.pointer {
		cursor: pointer;
		margin: 5px;
	}

	.notopmargin {
		margin-top: 0 !important;
	}

	.f14 {
		font-size: 14px;
	}

	.f18 {
		font-size: 18px;
	}

	.f28 {
		font-size: 28px;
	}

	.btn {
		border: none;
		padding: 10px 25px;
	}

	.btn-bgWhite {
		border: 1px solid #999999;
		background: #fff;
		border-radius: 2px;
	}

	.btn-bgWhite:hover,
	.btn-bgBlue:hover,
	.btn-bgYello:hover {
		background: #333;
		color: #fff;
	}

	.btn-bgBlue {
		background: #3582f8;
		border-radius: 2px;
		color: #fff;
	}

	.btn-bgYello {
		background: #e7a42f;
		border-radius: 2px;
		color: #fff;
	}

	.text-right {
		text-align: right;
	}

	.text-left {
		text-align: left;
	}

	.form-control {
		/* height: 40px; */
		background: #ffffff;
		border: 1px solid #d8d8d8;
		border-radius: 3px;
		box-shadow: none;
		margin: 15px;
		padding: 5px;
	}

	input:focus {
		outline: none;
	}

	.input-group-fan .form-control {
		margin: 0;
		padding: 10px 15px;
	}

	.input-group-fan select {
		display: block;
		height: 40px;
		width: 330px;
		border: 1px solid #d8d8d8;
		padding: 0 10px;
		border-radius: 3px;
	}

	.input-group-fan select option {
		padding: 5px;
	}

	.input-group-fan label {
		font-size: 14px;
		color: #333333;
	}

	.input-group-fan {
		margin: 20px 0;
		width: 100%;
	}

	.input-group-fan input {
		float: none !important;
		width: 500px !important;
		display: block !important;
	}

	.questionnaire_null {
		height: 500px;
		border: 1px dashed #3582f8;
		border-radius: 3px;
		margin-top: 30px;
		font-size: 18px;
		color: #000000;
	}

	.btn-event {
		display: inline-block;
		width: 50px;
		margin: 15px;
		cursor: pointer;
	}

	.input-border {
		border: 1px dashed #eee;
		margin-bottom: 10px !important;
		padding: 5px;
		width: 500px;
	}

	.icon_score {
		color: #d8d8d8;
		font-size: 28px !important;
		margin-right: 15px;
	}
</style>

